<template>
	<view class="content">
		<div class="recharge-top">
			<!-- 导航   begin-->
			<div class="recharge-nav">
				<i class="ali-icon " style="color:white" @click="back">&#xe667;</i>
				<div class="nav-middle">
					<div class="card-operator">{{operatorName}}</div>
					<div style="margin-left: 4px;">{{cardNumber}}</div>
				</div>
				<div class="nav-end" @click="changeCard" >
					<i class="ali-icon" style="color:white">&#xe62a;</i>
					<div style="margin-left: 4px;"> 切换</div>
				</div>
			</div>
			<!-- 导航   end-->

			<!-- 顶部下边 begin-->
			<div class="top-bottom">
				<!-- 顶部下边 左-->
				<div class="top-bottom-left">
					<img :src="operatorLogo" style="width: 60%;height: auto;">
				</div>
				<!-- 顶部下边 右-->
				<div class="top-bottom-right">
					<div class="right-row-one">
						<i class="ali-icon icon-color">&#xe661;</i>
						<div class='right-row-one-title' >{{top.headerName}}</div>
					</div>
					<div class="right-row-one" >
						<i class="ali-icon icon-color">&#xe62f;</i>
						<div style="margin-left: 10px;font-size:  medium;display: flex;flex-direction: row;">
							<div>有效期</div>
							<div style="color:grey">剩余</div>
							<div style="color:#74a7f0">{{top.surplusDay}}</div>
							<div style="color:grey">天</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 顶部下边 end-->

			<!-- 下半部 -->
			<div class="below-list">
				<div @click="open(item)" class="setmeal-card" v-for="(item,index) in setMealList" :key="index">
					<div class="card-left">
						<div class="card-row-one">
							<div style="font-weight: 540;">{{item.mealName}}</div>
							<div class="card-fydz" :style="{ 'background-color': item.labelDisplayColor!=''&&item.labelDisplayColor!=null ? item.labelDisplayColor : '#d8e5f7' }"
							 v-if="item.displayLabel!=''&&item.displayLabel!=null">{{item.displayLabel}}</div>
							<div class="card-fydz" v-if="item.dictMonthlyPayment=='YES'">分月到账</div>
						</div>
						<div class="card-row-two">

							<i class="ali-icon icon-position">&#xe7ac;</i>
							<div class="row-point point-one-position"></div>
							<div class="card-row-left-font">
								拥有流量
							</div>
							<div class="row-right">
								<b>{{item.mealSpec}}</b>
							</div>

						</div>
						<div class="card-row-three">
							<i class="ali-icon icon-position">&#xe60f;</i>
							<div class="row-point point-two-position"></div>
							<div class="card-row-left-font">
								有效期
							</div>
							<div class="row-right">
								<b>{{item.terOfValidity}}</b>
								<span style="font-size: 25upx;" v-if="item.dwLabel&&item.dwLabel!=='undefined'">{{item.dwLabel}}有效期</span>
								<span v-else>当月有效</span>
							</div>
						</div>
					</div>
					<div class="card-right">
						<div class="bolang"></div>
						<div class="circle"></div>
						<div class="card-price">
							<div class="">{{item.priceLabel}}
								<span style="font-size: 30upx;">￥</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="height: 50px;width: 100%;">

			</div>
		</div>
		<uni-popup ref="popup" type="bottom" class="bottom-popup">

			<div class="recharge-card">
				<div class="select-top">
					<div class="font-1">{{checkedSetmeal.mealName}}/{{(form.amount*checkedSetmeal.priceLabel).toFixed(2)}}元</div>
					<div class="font-2">请详细阅读套餐介绍</div>
					<div class="del-jiao" @click="closepop"></div>
					<i class="ali-icon card-del" @click="closepop">&#xe657;</i>
				</div>
				<div class="head-detail">
					{{explainText}}
				</div>
				<div class="select-form">
					<form @reset="formReset">
						<view class="uni-form-item uni-column form-line">
							<view class="title" style="margin-top: 2px;">生效时间:</view>
							<radio-group name="radio" @change="changeShengxiao" style="margin-top: -2px;">
								<label class="radio-font">
									<radio value="NO" class="radio-select" :checked="false" /><text>立即生效</text>
								</label>
								<label class="left-20 radio-font" v-if="checkedSetmeal.dictIsPreStorage=='YES'">
									<radio value="YES" class="radio-select" />
									<text>次月生效</text>
								</label>
							</radio-group>
						</view>
						<view class="uni-form-item uni-column form-line" v-if="checkedSetmeal.dictIsTerOfValiditySuper=='C_YES'">
							<view class="title">连续充值:</view>
							<uni-number-box @change="amountChange" :min="1" :max="12" :disabled="checkedSetmeal.dictIsTerOfValiditySuper!='C_YES'"></uni-number-box>
						</view>
						<view class="uni-form-item uni-column">
							<view class="title" style="margin-top: 2px;">充值方式:</view>
							<radio-group name="radio" @change="changeRechargeType" style="margin-top: -2px;">
								<label class="radio-font">
									<radio value="YE" class="radio-select" :checked="checkedSetmeal.checked" /><text>余额</text>
								</label>
								<label class="radio-font" v-if="checkedSetmeal.dictIsBuyInAmount!='C_YES'">
									<radio value="WX" class="radio-select" :checked="checkedSetmeal.checked" /><text>在线支付</text>
								</label>
								<!-- <label class="radio-font" v-for="item in payway" :key='item.value'><radio :value="item.value" class="radio-select" :checked="checkedSetmeal.checked" :disabled="checkedSetmeal.dictIsBuyInAmount=='C_YES'"/><text>{{item.label}}</text></label> -->
								<!-- <label class="left-20 radio-font" v-if="checkedSetmeal.dictIsBuyInAmount!='C_YES'">
									<radio value="WX" class="radio-select" :disabled="checkedSetmeal.dictIsBuyInAmount=='C_YES'" /><text>微信</text>
								</label> -->
							</radio-group>
						</view>
					</form>
				</div>
				<button type="primary" style="margin-top: 10px; width: 90%; margin-left:auto; margin-right:auto;" @click="recharge"
				 :loading="rechargeLoading">充值</button>
				<div style="height: 20px;width: 100%;"></div>
				<div></div>
			</div>
		</uni-popup>
		<!-- <uni-popup ref="cardPopup" type="bottom" class="bottom-popup" >
			
		</uni-popup> -->
		<div v-if='showDialogue' class='bg-popup'>
			<div class='card-bottom-popup' v-bind:style="{'height': cardList.length>9?'60vh':'auto'}">
				<div class="card_title">
					<span>请选择卡号</span>
					<span @click='showDialogue=false' class='btn'>关 闭</span>
					<!-- <button class='btn' @click='showDialogue=false' size='mini' type="default">关 闭</button> -->
				</div>
				<div v-for="(item, index) in cardList" :key='index' class='card-item' @click='changeCardId(item)'>
					{{item.cardNumber}}
				</div>
			</div>
		</div>
		<pay-keyboard :show_key="show_key" @hideFun="hideFun" @getPassword="getPassword"></pay-keyboard>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import payKeyboard from '@/components/keyboard.vue'
	import pay from '@/utils/wxpayUtils.js'
	import {
		decryptDes
	} from '@/utils/utils'
	export default {
		components: {
			uniPopup,
			uniNumberBox,
			payKeyboard
		},
		data() {
			return {
				//获取当前页面数据的接口
				getCreateOrderPage: 'customer-order/listSetMealByCardId',
				//获取这张卡是不是有密码
				getCardIfSetPasswordUlr: "card/getCardIfSetPassword",
				//获取pagekey
				getPagekey: '/pageKey/get.dnl',
				//余额下单接口
				balanceRechargeSetmeal: 'balanceRecharge/balanceRechargeSetmeal/recheck',
				//微信下单
				createCustomerOrder: "customer-order/createCustomerOrder",
				cardId: '',
				liantongLogo: '/static/liantong.png',
				yidongLogo: '/static/yidong.png',
				dianxinLogo: '/static/dianxin.png',
				cardNumber: '',
				operatorName: '',
				operatorLogo: '',
				time: '',
				setMealList: [],
				top: {
					headerName: '--------',
					surplusDay: 0
				},
				checkedSetmeal: {
					//是否可以连续充值
					dictIsTerOfValiditySuper: 'C_NO',
					//是否可以次月生效
					dictIsPreStorage: 'NO',
					//是否仅余额充值
					dictIsBuyInAmount: 'C_NO',
					checked: false
				},
				form: {
					amount: 1,
					dictIsPreStorage: '',
					dictPayTunnel: '',
					password: ""
				},
				explainText: '',
				show_key: false,
				pagekey: '',
				rechargeLoading: false,
				changeCardUrl: 'card-customer/listUserCardForCut',
				cardList: [],
				getCardDate: 'card/getCardData',
				showDialogue: false,
				code: '',
				open_id: '',
				payway: [],
			}
		},
		async onLoad(option) {
			let _this = this;
			if (option.cardNumber == undefined || option.cardNumber == null) { //二维码跳转进来的
				let url = window.location.href;
				let newUrl = window.location.protocol + '//' + window.location.host + '/pages/tabbar/recharge/createOrder';
				let para = "";
				if (url.lastIndexOf("?") > 0) {
					para = url.substring(url.lastIndexOf("?") + 1, url.length);
					let arr = para.split("&");
					let arr1 = arr[0].split('=');
					let arr2 = arr[1].split('=');
					_this.code = arr1[1];
					_this.cardId = arr2[1];
					window.history.pushState({}, 0, newUrl)
					let obj = await this.$req.singOn('customer/returnInfo/white', {
						cardId: _this.cardId,
						code: _this.code
					})
					if (obj.data) {
						newUrl += '&cardNumber=' + obj.data.cardNumber + '&operatorName=' + obj.data.dictOperatorNameName + '&time='
						_this.cardNumber = obj.data.cardNumber;
						_this.operatorName = obj.data.dictOperatorNameName;
						_this.time = '';
						_this.openid = obj.data.openid;

						uni.setStorage({
							key: 'custoken',
							data: obj.data.token
						});
					}
				}

			} else {
				this.cardId = option.cardId
				this.cardNumber = option.cardNumber
				this.operatorName = option.operatorName
				this.time = option.time

			}

			if (this.operatorName == '电信') {
				this.operatorLogo = this.dianxinLogo
			} else if (this.operatorName == '移动') {
				this.operatorLogo = this.yidongLogo
			} else if (this.operatorName == '联通') {
				this.operatorLogo = this.liantongLogo
			}

			await this.initDate()
		},
		watch: {
			"show_key": function(newVal, oldVal) {
				if (newVal) {
					this.rechargeLoading = true
				} else {
					this.rechargeLoading = false
				}
			}
		},
		methods: {
			async changeCard() {
				let obj = await this.$req.userData(this.changeCardUrl, {
					cardId: this.cardId
				})
				if (obj.data) {
					this.cardList = [];
					this.cardList = new Array(...obj.data)
					// this.$refs.cardPopup.open();
					this.showDialogue = true;

				} else {
					alert('您暂无其他可切换卡片')
				}
			},
			async changeCardId(item) {
				console.log(item)
				this.cardId = item.id;
				this.cardNumber = item.cardNumber;
				this.operatorName = item.dictCardOperatorName
				if (this.operatorName == '电信') {
					this.operatorLogo = this.dianxinLogo
				} else if (this.operatorName == '移动') {
					this.operatorLogo = this.yidongLogo
				} else if (this.operatorName == '联通') {
					this.operatorLogo = this.liantongLogo
				}
				let obj_time = await this.$req.userData(this.getCardDate, {
					id: item.id
				});
				if (obj_time) {
					this.time = obj_time.data.expirationDate
				}
				console.log('time===' + this.time)

				await this.initDate();
				this.showDialogue = false;
				// this.$refs.cardPopup.close();
			},
			back() {
				uni.navigateBack({
					delta: 2
				});
			},
			amountChange(value) {
				this.form.amount = value
			},
			closepop() {
				this.$refs.popup.close()
			},
			// changeCard() {
			// 	// alert("切换功能暂未开放！敬请期待!(^_−)☆")
			// },
			async open(setMeal) {
				
				if (setMeal.dictIsBuyInAmount == 'C_YES') {
					this.form.dictPayTunnel = 'YE'//余额
					setMeal.checked = true
				}
				this.checkedSetmeal = setMeal
				// let res = await this.$req.OEMSetting('payment/choosePayment',{dictPayTypeFlag:'JSAPI'});
				// this.payway = [];
				// if(res._result && res.data){
				// 	for(let item of res.data){
				// 		this.payway.push({ value: item.id, label: item.paymentRealName })
				// 	}
				// }
				this.rechargeLoading = false
				this.$refs.popup.open()
			},

			hideFun() {
				this.show_key = false
			},
			async getPassword(n) {
				this.form.password = n.password
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let pk = await this.$req.sendCheck(this.getPagekey)
				let key = decryptDes(pk.data, 'shendawl', ['s', 'h', 'e', 'n', 'd', 'a', 'w', 'l'])
				this.form.pagekey = key
				let that = this
				try {
					let obj = await this.$req.userRecharge(this.balanceRechargeSetmeal, this.form)
					if (obj != undefined&&obj.data) {
						//充值成功后跳转到卡列表页
						uni.navigateTo({
							url: '/pages/cardController/cardController?cardId=' + that.cardId

						});
					}
				} catch (e) {
					console.log("异常信息：")
					console.log(e)
					if (e.code == 220010) {
						uni.showModal({
							title: '提示',
							content: '您的余额不足是否跳转到充值页面',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/tabbar/recharge/newBalanceRecharge?cardId=' + that.cardId + "&cardNumber=" + that.cardNumber
									});
								} else if (res.cancel) {

									that.show_key = false
									that.$refs.popup.close()
								}
							}
						});
						uni.hideLoading()
					}

				}
				uni.hideLoading()
			},
			async recharge() {
				/**
				 * 如果是余额充值就去获取一个pagekey并解密
				 * 然后弹出输入密码
				 * 密码输入完毕后传入接口
				 * 直到成功关闭界面
				 * 然后清除pagekey
				 */
				//获取地理位置
				this.form.setMealId = this.checkedSetmeal.id
				this.form.cardId = this.cardId
				if (this.form.dictPayTunnel == '') {
					this.$message("请选择一个付款方式！")
					return
				}
				if (this.form.dictIsPreStorage == '') {
					this.$message("请选择生效时间")
					return
				}
				if (this.form.dictPayTunnel == "YE") {
					//校验这张卡是不是有密码 如果没有密码就跳转到设置密码页面
					let ifPassword = await this.$req.userData(this.getCardIfSetPasswordUlr, {
						id: this.cardId
					})
					if (!ifPassword.data) {

						this.$message("您的卡号没有设置密码，两秒后跳转到设置密码页面！")
						let uri = this.$mp.page.route + "?cardId=" + this.cardId +
							"&cardNumber=" + this.cardNumber +
							"&operatorName=" + this.operatorName
						uri = encodeURIComponent(uri)
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/other/modifyPassword?cardId=' + this.cardId + "&_redir=" + btoa(uri)
							});
						}, 2000)
						return
					}
					this.rechargeLoading = true
					this.show_key = true

				} //如果是微信
				else{
					/* 
					   通过后台接口查询：
						①是否实名 未实名-关闭抽屉  已实名--进入支付流程
						②获取套餐金额 传入下一页
					 */
					let res = await this.$req.userRecharge('customer-order/getCustomerOrderPrice',this.form);
					if(res._result&&res.code==10000){
						uni.navigateTo({
							url: '/pages/other/payment/payment?amount='+this.form.amount+'&dictIsPreStorage='+this.form.dictIsPreStorage+'&setMealId='+this.form.setMealId+'&cardId='+this.cardId+'&cardNumber='+this.cardNumber+'&price='+res.data+'&type=meal'
						})
					}
				}
			},
			changeShengxiao(evn) {
				this.form.dictIsPreStorage = evn.detail.value
			},
			changeRechargeType(evn) {
				this.form.dictPayTunnel = evn.detail.value=='YE'?'YE':'WX';
				// this.form.paymentId = evn.detail.value=='YE'?'':evn.detail.value
			},
			initDate() {
				this.$req.userRecharge(this.getCreateOrderPage, {
					id: this.cardId,
					searchDate: this.time
				}).then(v => {
					if (v) {
						this.top.surplusDay = v.data.time
						this.top.headerName = v.data.headerName
						this.explainText = v.data.explainText
						this.setMealList = [];
						v.data.listSetMeal.forEach(setMeal => {
							let obj = {}
							obj.id = setMeal.id
							obj.mealName = setMeal.mealName
							obj.dictMonthlyPayment = setMeal.dictMonthlyPayment
							obj.mealSpec = this.$toGB.exe(setMeal.mealSpec)
							obj.terOfValidity = setMeal.terOfValidity
							let dw = setMeal.dictTerOfValidityName == "月" ? "个" : "";
							let dwLabel = dw + setMeal.dictTerOfValidityName
							obj.dwLabel = dwLabel
							obj.priceLabel = setMeal.salePrice;
							obj.displayLabel = setMeal.displayLabel;
							obj.labelDisplayColor = setMeal.labelDisplayColor
							obj.dictIsTerOfValiditySuper = setMeal.dictIsTerOfValiditySuper
							obj.dictIsPreStorage = setMeal.dictIsPreStorage
							obj.dictIsBuyInAmount = v.data.dictIsBuyInAmount
							this.setMealList.push(obj)
						})
					}

				})
			},
		}
	}
</script>

<style lang="scss">
	body {
		background-color: white;
	}

	.content {
		width: 100%;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		background-color: white;
		padding: 0;
		margin: 0px;
	}

	.recharge-top {
		background-image: url(/static/recharge_top_bg.png);

		background-size: 100%, 100%;
		background-position: 0% 0%;
		height: 360upx;
		width: 100%;
		background-repeat: no-repeat;
		margin-top: 0px;
		margin-left: 0px;
		width: 100%;
	}

	.recharge-nav {
		display: flex;
		justify-content: space-between;
		height: 52upx;
		color: white;
		padding-left: $left-10;
		padding-right: $left-10;
		padding-top: $left-10;

	}

	.nav-middle {
		display: flex;
		align-items: center;
	}

	.nav-end {
		display: flex;
		align-items: center;
		font-size: small;
	}

	.top-box {
		background-color: rgba(255, 255, 255, 0.73);
		height: 100%;
		box-shadow: 5px 5px 15px #cbd9f7;
		border-radius: 5px;
	}

	.top-bottom {
		margin-top: 10px;
		height: 93px;
		width: 98%;
		padding: 0 2%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.top-bottom-left {
		@extend .top-box;
		width: 30%;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-bottom-right {
		@extend .top-box;
		height: 86%;
		margin-right: 10px;
		width: 60%;
		float: right;
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
		padding: 2%;
	}

	.right-row-one {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 40px;
	}
	.right-row-one-title{
		margin-left: 10px;
		font-size:  medium;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.icon-color {
		background: linear-gradient(to right, #2989cc, #5e647b);
		-webkit-background-clip: text;
		color: transparent;
		font-weight: 900;
	}

	.below-list {
		display: flex;
		flex-direction: column;
	}

	.setmeal-card {
		@extend .top-box;
		display: flex;
		border-radius: 3px;
		margin-left: $left-10;
		margin-right: $left-10;
		height: 200upx;
		margin-top: 15px;
	}



	.card-left {

		width: 65%;
		height: 180upx;
		padding-left: $left-10;
		padding-top: $left-10;
		position: relative;
	}



	.card-row {
		display: flex;

	}

	.card-row-one {
		line-height: 20px;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin: 5px 0;
	}

	.card-row-two {
		position: relative;
		height: 45upx;
	}

	.card-row-three {
		position: relative;
		height: 45upx;
	}

	.card-fydz {
		background-color: #d8e5f7;
		transform: skew(-20deg);

		font-size: xx-small;
		padding: 2px;
		text-align: center;
		border-radius: 5px;
		margin-left: 10px;
		background-blend-mode: color burn;
		color: #005c9e;
		width: 50%;
	}

	.row-left {
		display: flex;
		font-size: 25upx;

	}

	.icon-position {
		color: black;
		font-size: 35upx;
		position: absolute;
		bottom: 0px;
	}

	.row-icon {
		width: 45upx;
		position: relative;
		bottom: 0px;
	}

	.row-point {
		background-color: rgba($color: #c5dbf9, $alpha: 0.6);
		border-radius: 5px;
		width: 8px;
		height: 8px;
	}

	.point-one-position {
		position: absolute;
		left: 25upx;
		top: 10upx
	}

	.card-row-left-font {
		color: #aacaff;
		bottom:0;
		position: absolute;
		left: 55upx;
		font-size: 14px;
		font-weight: bold;
	}

	.row-right {
		font-size: 35upx;
		right: 0px;
		position: absolute;
		top: 5upx;
		width: 180upx;
		letter-spacing: 2upx;
	}

	.point-two-position {
		position: absolute;
		left: 25upx;
		top: 21upx
	}

	.card-right {
		width: 250upx;
		height: 100%;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		background: #5596ff;
		position: relative;
	}

	.bolang {
		background-color: rgba($color: #fff, $alpha: 0); /* 浏览器不支持的时候显示 */
		background-image: radial-gradient(circle, white 4px, transparent 5px);
		background-size: 15px 15px;
		width: 15px;
		height: 100%;
		position: absolute;
		left: -8px;
	}

	.circle {
		width: 8px;
		height: 12px;
		background: rgba(255, 255, 255, 0.73);
		border-radius: 6px 0 0 6px;
		position: absolute;
		right: 0;
		top: 90upx;
	}

	.card-price {
		color: white;
		position: absolute;
		top: 50upx;
		left: 80upx;
		font-size: 60upx;
	}

	.recharge-card {
		width: 100%;
		height: auto;
		background-color: white;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

	}

	.top-tab {

		height: 36px;
		width: 100%;
		padding-top: 8px;
		border-bottom: 1px solid $font-grey-color;

	}

	.select-form {
		padding-top: 10px;
		width: 90%;
		margin-left: auto;
		margin-right: auto;

	}

	.head-detail {
		padding-top: 130upx;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		white-space: pre-wrap;
		font-size: 34upx;
		line-height: 46upx;
		color: #333;
	}

	.select-top {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: $theme-color;
		height: 100upx;
		width: 100%;
		padding: 10upx 0;
		position: absolute;
		top: 0px;
		left: 0px;
		color: white;

		.font-1 {
			width: calc(100vw - 20px);
			margin-left: $left-10;
		}

		.font-2 {
			margin-top: 2px;
			font-size: small;
			margin-left: $left-10;
		}
	}

	.title {
		font-size: small;
		color: $font-bule-color;

	}

	.form-line {
		display: flex;
		align-items: center;
	}

	.radio-select {
		transform: scale(0.7, 0.7);
	}

	.radio-font {
		font-size: small;
		margin-right: 5px;
	}

	.bg-popup {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 100;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.card-bottom-popup {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 0 0 40upx 0;
		background-color: #ffffff;
		overflow-y: scroll;
		border-radius: 5px 5px 0 0;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		// margin-bottom: 30px;
	}

	.card_title {
		width: 90%;
		height: 60upx;
		line-height: 60upx;
		position: relative;
		top: 0;
		left: 0;
		z-index: 100;
		padding: 20upx 5%;
		border-bottom: 1px solid #e0e1e1;
		background: #78A8F2;
		color: #fff;
	}

	.card-item {
		width: 60%;
		height: 80upx;
		position: relative;
		top: 0;
		left: 20%;
		line-height: 80upx;
		border-bottom: 1px solid #e6e6e6;
		font-size: 30upx;
		color: #78a8f2;
		text-align: center;
		letter-spacing: 2px;
	}

	.btn {

		float: right;
		color: #fff;
	}
</style>
